<template>
	<view>
		<view class="dbdh">
			<view :class="Index==1?'active':''" @click="changeIndex(1)">基本信息</view>
			<view :class="Index==2?'active':''" @click="changeIndex(2)">取用水信息</view>
			<view :class="Index==3?'active':''" @click="changeIndex(3)">日常监管纪录</view>
		</view>
		<view v-show="Index==1">
			<view class="bditem">
				<view>单位名称</view>
				<view>{{yshxq.qy_name}}</view>
			</view>
			<view class="bditem">
				<view>统一社会信用代码</view>
				<view>{{yshxq.qy_bainma}}</view>
			</view>
			<view class="bditem">
				<view>详细位置</view>
				<view>{{yshxq.qy_tongxun}}</view>
			</view>
			<view class="bditem">
				<view>所属区镇</view>
				<view>{{yshxq.qy_tongxun}}</view>
			</view>
			<view class="bditem">
				<view>行业类别（大类）</view>
				<view>{{yshxq.qy_leibieda}}</view>
			</view>
			<view class="bditem">
				<view>用水管理人员</view>
				<view>{{yshxq.nys_tianbiaoren}}</view>
			</view>
			<view class="bditem">
				<view>联系电话</view>
				<view>{{yshxq.qy_gtel}}</view>
			</view>
			<view class="bditem">
				<view>企业类型</view>
				<view>
					<label class="radio">
						<radio color="#3478F7" :checked="yshxq.qy_leixing=='工业企业'" :disabled="yshxq.qy_leixing!='工业企业'" />工业企业
					</label>
					<label class="radio" >
						<radio color="#3478F7" :checked="yshxq.qy_leixing=='大生活用水户'" :disabled="yshxq.qy_leixing!='大生活用水户'" />大生活用水户
					</label>
				</view>
			</view>
		</view>
		<view v-show="Index==2">
			<view class="bditem">
				<view>水源类型</view>
				<view>
					<label class="radio2">
						<radio color="#3478F7" :checked="type" :disabled="!type" />自来水
					</label>
					<label class="radio2" >
						<radio color="#3478F7" :checked="!type" :disabled="type" />地表水
					</label>
					<label class="radio2" >
						<radio color="#3478F7" :checked="!type" :disabled="type" />地下水
					</label>
				</view>
			</view>
			<view class="activet">自来水</view>
			<view class="bditem">
				<view>区域归属</view>
				<view>{{yshxq.qy_guishu}}</view>
			</view>
			<view class="bditem">
				<view>地址</view>
				<view>{{yshxq.qy_tongxun}}</view>
			</view>
			<uni-table class="tabe" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th>水表号</uni-th>
					<uni-th>校验时间</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td>{{yshxq.qy_num}}</uni-td>
					<uni-td>{{yshxq.nys_time}}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="activet">地下水</view>
			<view class="bditem">
				<view>区域归属</view>
				<view>{{yshxq.qy_guishu}}</view>
			</view>
			<view class="bditem">
				<view>地址</view>
				<view>{{yshxq.qy_tongxun}}</view>
			</view>
			<uni-table class="tabe" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th>水表号</uni-th>
					<uni-th>校验时间</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td>{{yshxq.qy_num}}</uni-td>
					<uni-td>{{yshxq.nys_time}}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="activet">地表水</view>
			<view class="bditem">
				<view>区域归属</view>
				<view>{{yshxq.qy_guishu}}</view>
			</view>
			<view class="bditem">
				<view>地址</view>
				<view>{{yshxq.qy_tongxun}}</view>
			</view>
			<uni-table class="tabe" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th>水表号</uni-th>
					<uni-th>校验时间</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td>{{yshxq.qy_num}}</uni-td>
					<uni-td>{{yshxq.nys_time}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view v-show="Index==3">
			<view v-if="!yshjg.length" class="zwsj">暂无数据</view>
			<view v-for="(item,index) in yshjg" :key="item" class="rcjd">
				<view class="sxk">
					<view>监管日期</view>
					<view>监管人员</view>
				</view>
				<view class="sxk">
					<view>{{item.jg_time}}</view>
					<view>{{item.jg_renyuan}}</view>
				</view>
				<button type="primary" @click="ckjg(item)">查看</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import http from '../../utils/http'
	import {useStore} from 'vuex';
	export default {
		setup() {
			const {state,commit}=useStore();
			let data = reactive({
				yshxq:{},
				yshjg:[],
				Index: 1,
				type:0,
				ckjg(v){
					commit('slapp/setJg',v)
					uni.navigateTo({
						url:'/pages/slsy/ckjg'
					})
				},
				changeIndex: (n) => {
					data.Index = n
					if(n==3){
						http({
							url:'/yshjg',
							method:'get',
							data:{
								name:data.yshxq.qy_name
							}
						}).then((res)=>{
							data.yshjg=res.data.data
						})
					}
				}
			})
			onMounted(()=>{
				data.yshxq=state.slapp.yshxq
			})
			return {
				...toRefs(data)
			}
		},
	}
</script>

<style lang="scss">
	.dbdh {
		display: flex;
		padding: 20rpx 0;
		color: #666666;
		border-bottom: 1px solid #E4E4E4;

		view {
			height: 60rpx;
			line-height: 60rpx;
			width: 250rpx;
			text-align: center;
		}

		.active {
			color: #0079FE;
			border-bottom: 2px solid #0079FE;
		}
	}
	.radio{
		margin-left: 16rpx;
	}
	.radio2{
		margin-left: 10rpx;
	}
	.bditem {
		color: #666666;
		padding: 20rpx 30rpx;
		display: flex;
		border-bottom: 1px solid #E4E4E4;

		view {
			display: flex;
			align-items: center;
		}

		&>view:first-child{
			text-align: center;
			width: 130rpx;
			margin-right: 80rpx;
		}
		&>view:last-child{
			font-size: 30rpx;
		}
	}
	.activet{
		padding: 20rpx 10rpx;
		color: #0079FE;
		border-bottom: 1px solid #E4E4E4;
	}
	.tabe{
		text-align: center;
	}
	.uni-table-th{
		background-color: #F2F2F2;
	}
	.rcjd{
		border: 1px solid #E4E4E4;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360*2rpx;
		height: 67*2rpx;
		margin: 30rpx auto 0 auto;
		&>view:first-child{
			font-weight: 600;
		}
		.sxk{
			view:first-child{
				margin-bottom: 8rpx;
			}
		}
		button{
			height: 67rpx;
			line-height: 67rpx;
			font-size: 32rpx;
			margin: 0;
			border: none;
			background-color: #0079FE;
		}
	}
	.zwsj{
		text-align: center;
		font-size: 40rpx;
		margin-top: 100rpx;
	}
</style>
